<template>
  <common-page v-model="height">
    <template v-slot:header>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr1" placeholder="废气" style="width:120px;">
          <el-option
            v-for="item in list1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr2" placeholder="烟尘" style="width:120px;">
          <el-option
            v-for="item in list2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="common-form-control">
        <el-date-picker
          v-model="queryObj.attr3"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width:240px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        />
      </div>
    </template>
    <el-row :gutter="0">
      <template v-for="(panels,index) in panelListArray">
        <el-col
          :style="{'marginTop':index>1 ? '15px' :'0'}"
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <card-panel class="box-card" :title="panels[0].title" style="height:370px;">
            <bar-chart style="height:330px" />
          </card-panel>
        </el-col>
        <el-col
          :style="{'marginTop':index>1 ? '15px' :'0'}"
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <card-panel class="box-card" :title="panels[1].title" style="height:370px;">
            <pie-chart style="height:330px" />
          </card-panel>
        </el-col>
      </template>
    </el-row>
  </common-page>
</template>

<script>
import CommonPage from '@/components/CommonPage/index.vue'
import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'

export default {
  name: 'ZongtiYulan',
  components: {
    CommonPage,
    BarChart,
    PieChart
  },
  data() {
    return {
      loading: false,
      height: 600,
      list1: [],
      list2: [],
      list3: [],
      queryObj: {
        attr1: '',
        attr2: '',
        attr3: ''
      },
      panelList: [
        {
          title: '烟尘区域统计'
        },
        {
          title: '烟尘行业占比统计'
        },
        {
          title: '烟尘区域统计'
        },
        {
          title: '烟尘区域占比统计'
        }
      ]
    }
  },
  computed: {
    panelListArray() {
      const panelArray = []
      const panelList = this.panelList
      for (let i = 0; i < panelList.length; i += 2) {
        panelArray.push(panelList.slice(i, i + 2))
      }
      return panelArray
    },
    tableHeight() {
      return this.height - 60
    }
  },
  methods: {
    page({ pageNo }) {
      if (pageNo != undefined) {
        this.queryParams.pageNo = pageNo
      }
      this.fetchList()
    },
    fetchList() {
      this.loading = true
      new Promise((resolve, reject) => {
        this.loading = false
        resolve()
      })
    }
  }
}
</script>

<style scoped>

</style>
